<template>
  <div class="page-mod">
    <div class="chat-item">
      <div class="chat-content">
        {{ siteInfo.siteGptDesc }}
      </div>
    </div>
    <!-- <div @click="clickItem(maxLength)">我是welcome</div> -->
    <div class="tip">你可以这样问我</div>
    <div class="chat-item" v-for="(item, index) in welcomeList" :key="'sss' + index">
      <div @click="clickQuestion(item)" class="chat-content">
        <!-- index--{{ index }} -->
        <div v-html="item.question && item.question.length >= maxLength ? item.question.slice(0, maxLength) + '...' :
          item.question
          "></div>

      </div>
    </div>
  </div>
</template>

<script setup>

// const isOperate = ref(false);
import { onMounted, ref, watch } from 'vue';
import ChatItem from './ChatItem'
import { getQuestionsAnswer, qsList } from '@/api/questions'
import { useAppStore, useChatStore } from '@/store';
let welcomeText = ref('');
import Ai from './AI.js';
import storage from '@/utils/storage/index.js';
const appStore = useAppStore();
const chatStore = useChatStore();
let siteInfo = ref({});
let welcomeList = ref([

]);
siteInfo.value = storage.get('siteInfo');
watch(appStore, (newVal, oldVal) => {
  welcomeText.value = newVal.siteInfo.siteGptDesc;
})
onMounted(() => {
  QsListFn()
})
let maxLength = 20;

/**
 * 获取百问百答的热门问答
 */
async function QsListFn() {
  try {
    const { data } = await qsList({
      currentPage: 1,
      limit: 5,
      typeName: '百问百答',
    })
    welcomeList.value = data
    // console.log(data, '问题')
    // scrollToBottomIfAtBottom()

    // scrollToBottom()
  }
  catch (error) {
    console.log(error)
  }
}
function clickItem(aaa) {
  // ;
}
function clickQuestion(item, index2) {
  uni.setStorageSync('isFirstVisit', true)

  chatStore.addChat({
    apiType: 'stream',
    answerType: 'ai',
    fresh: "req",
    question: item.question,
    freshIsAi: true,
  });
  // ;
}




function addMessage() {
  // welcomeList.value.push({
  //   "id": "3",
  //   "name": "小红",
  //   "avatar": "/images/avatar.png",
  //   "time": "2021.01.01 12:00:00",
  //   "content": "你好，我是小红",
  // })

}
</script>

<style>
@import url(./chat.less);
</style>
<style lang="less" scoped>
.chat-item {
  display: block;
}

.chat-item {
  display: block;
  // width: 504rpx;


}

.chat-content {
  padding: 0.4rem;
  line-height: 1.5;
  margin-bottom: 20rpx;
  border-radius: 16rpx;
  color: var(--a-one-text-color);
  display: inline-block;
  background: var(--a-main-box-bg-color);

}

.tip {
  font-size: 30rpx;
  margin: 38rpx 0 20rpx;
  font-weight: bold;
  color: var(--a-one-text-color);
  line-height: 44rpx;

}
</style>